<template>
  <div class="app-container">
    <div class="filter-container">
      <el-card>
        <el-form ref="searchform" :inline="true" :model="searchform" class="demo-form-inline" size="small">
          <el-form-item label="订单号：">
            <el-input v-model="searchform.OrderNo" clearable placeholder="订单号" />
          </el-form-item>
          <el-form-item label="购买人：">
            <el-input v-model="searchform.BuyName" clearable placeholder="购买人" />
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input v-model="searchform.ShippingName" clearable placeholder="收货人" />
          </el-form-item>
          <el-form-item label="推荐人">
            <el-input v-model="searchform.ReferralPerson" clearable placeholder="推荐人" />
          </el-form-item>

          <el-form-item label="状态：">
            <el-select v-model="searchform.Status" placeholder="请选择">
              <el-option
                v-for="item in StatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card>
      <div class="list-btn-container">
        <el-button-group>
          <slot v-for="itemf in loadBtnFunc">
            <el-button v-if="itemf.FullName==='新增'" type="default" icon="el-icon-plus" size="small" @click="ShowEditOrViewDialog()">新增</el-button>
            <el-button v-if="itemf.FullName==='修改'" type="default" icon="el-icon-edit" size="small" @click="ShowEditOrViewDialog('edit')">修改</el-button>
            <el-button v-if="itemf.FullName=='下架'" type="default" icon="el-icon-video-pause" size="small" @click="SetOnState('0')">下架</el-button>
            <el-button v-if="itemf.FullName=='上架'" type="default" icon="el-icon-video-play" size="small" @click="setEnable('1')">上架</el-button>
            <el-button v-if="itemf.FullName==='软删除'" type="default" icon="el-icon-delete" size="small" @click="deleteSoft('0')">软删除</el-button>
            <el-button v-if="itemf.FullName==='删除'" type="default" icon="el-icon-delete" size="small" @click="deletePhysics()">删除</el-button>
            <el-button v-if="itemf.FullName==='重置密码'" type="default" icon="el-icon-refresh-right" size="small" @click="handleResetPassword()">重置密码</el-button>
          </slot>
          <el-button type="default" icon="el-icon-refresh" size="small" @click="loadTableData()">刷新</el-button>
        </el-button-group>
      </div>
      <el-table
        ref="gridtable"
        v-loading="tableloading"
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        :default-sort="{prop: 'SortCode', order: 'descending'}"
        @select="handleSelectChange"
        @select-all="handleSelectAllChange"
        @sort-change="handleSortChange"
      >
        <el-table-column
          type="selection"
          width="30"
        />
        <el-table-column
          prop="SourceTypeDes"
          label="O1"
          width="50"
          align="center"
        />
        <el-table-column
          prop="OrderNo"
          label="订单号"
          sortable="custom"
          width="230"
          align="center"
        />
        <el-table-column
          prop="NickName"
          label="用户昵称"
          sortable="custom"
          width="230"
          align="center"
        />
        <el-table-column
          prop="ParentNickName"
          label="上级推广员"
          sortable="custom"
          width="230"
          align="center"
        />
        <el-table-column
          prop="Amount"
          label="金额"
          sortable="custom"
          width="180"
          align="center"
        />
        <el-table-column
          prop="PayAmount"
          label="支付金额"
          sortable="custom"
          width="190"
          align="center"
        />
        <el-table-column
          prop="PayTime"
          label="支付时间"
          sortable="custom"
          width="190"
          align="center"
        />
        <el-table-column
          prop="RebateTotalAmount"
          label="可返利金额"
          sortable="custom"
          width="190"
          align="center"
        />
        <el-table-column
          prop="StatusDes"
          label="状态"
          sortable="custom"
          width="190"
          align="center"
        />
        <!-- <el-table-column
          prop="AppointmentTime"
          label="预约时间"
          sortable="custom"
          width="190"
          align="center"
        /> -->
        <el-table-column
          prop="CreateTime"
          label="下单时间"
          width="180"
          sortable
        />
        <el-table-column
          prop="UserAddressDto.ConsigneeName"
          label="收货人"
          sortable="custom"
          width="190"
          align="center"
        />
        <el-table-column
          prop="UserAddressDto.ConsigneePhone"
          label="收货电话"
          sortable="custom"
          width="190"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ShowEditOrViewDialog('select',scope.row)">查看</el-button>
            <el-button v-show="scope.row.Status==2||scope.row.Status==3||scope.row.Status==5" type="text" size="small" @click="ShowRebateOrViewDialog('select',scope.row)">返利</el-button>
            <el-button v-show="scope.row.Status===2" type="text" size="small" @click="ShowDeliveryOrViewDialog('select',scope.row)">发货</el-button>
            <el-button v-show="scope.row.Status!==3&&scope.row.Status!==4" type="text" size="small" @click="cancelOrder(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="[5,10,20,50,100, 200, 300, 400]"
          :page-size="pagination.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog ref="dialogEditForm" :title="editFormTitle+'订单'" :visible.sync="dialogEditFormVisible" width="1200px">
      <el-form ref="editFrom" :model="editFrom" :rules="rules" class="yuebon-setting-form">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane label="基本信息" name="first">
            <el-form-item label="昵称" :label-width="formLabelWidth" prop="NickName">
              <el-input v-model="editFrom.NickName" :disabled="IsDisabled" placeholder="请输入昵称" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="订单号" :label-width="formLabelWidth" prop="OrderNo">
              <el-input v-model="editFrom.OrderNo" :disabled="IsDisabled" placeholder="请输入订单号" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="金额" :label-width="formLabelWidth" prop="Amount">
              <el-input v-model="editFrom.Amount" :disabled="IsDisabled" placeholder="请输入金额" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="支付金额" :label-width="formLabelWidth" prop="PayAmount">
              <el-input v-model="editFrom.PayAmount" :disabled="IsDisabled" placeholder="请输入支付金额" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="支付时间" :label-width="formLabelWidth" prop="PayTime">
              <el-input v-model="editFrom.PayTime" :disabled="IsDisabled" placeholder="请输入支付时间" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth" prop="StatusDes">
              <el-input v-model="editFrom.StatusDes" :disabled="IsDisabled" placeholder="请输入状态" autocomplete="off" clearable />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="收货地址" name="second">
            <el-form-item label="收获姓名" :label-width="formLabelWidth" prop="ConsigneeName">
              <el-input v-model="editFrom.UserAddressDto.ConsigneeName" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="城市" :label-width="formLabelWidth" prop="ConsigneeProvinceCity">
              <el-input v-model="editFrom.UserAddressDto.ConsigneeProvinceCity" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="街道" :label-width="formLabelWidth" prop="ConsigneeStreet">
              <el-input v-model="editFrom.UserAddressDto.ConsigneeStreet" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth" prop="ConsigneePhone">
              <el-input v-model="editFrom.UserAddressDto.ConsigneePhone" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth" prop="ConsigneeAddress">
              <el-input v-model="editFrom.UserAddressDto.ConsigneeAddress" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item>
            <!-- <el-form-item label="邮编" :label-width="formLabelWidth" prop="Zip">
              <el-input v-model="editFrom.UserAddressDto.Zip" :disabled="IsDisabled" placeholder="" autocomplete="off" clearable />
            </el-form-item> -->

          </el-tab-pane>
          <el-tab-pane label="商品信息" name="three">
            <template>
              <el-table
                :data="editFrom.OrderDetailDtos"
                style="width: 100%"
              >
                <el-table-column
                  prop="GoodsId"
                  label="商品编码"
                  width="180"
                />
                <el-table-column
                  prop="Amount"
                  label="价格"
                  width="180"
                />
                <el-table-column
                  prop="GoodsName"
                  label="商品名称"
                  width="180"
                />
                <el-table-column
                  prop="GoodsSpecName"
                  label="商品规格"
                  width="180"
                />
                <el-table-column
                  prop="Num"
                  label="数量"
                  width="180"
                />
              </el-table>
            </template>

          </el-tab-pane>
          <el-tab-pane label="物流信息" name="four">
            <template>
              <el-form-item label="快递公司" :label-width="formLabelWidth" prop="ShippingName">
                <el-input v-model="editFrom.OrderShippingDto.ShippingName" :disabled="IsDisabled" placeholder="快递公司" autocomplete="off" clearable />
              </el-form-item>
              <el-form-item label="快递单号" :label-width="formLabelWidth" prop="ShippingSn">
                <el-input v-model="editFrom.OrderShippingDto.ShippingSn" :disabled="IsDisabled" placeholder="快递单号" autocomplete="off" clearable />
              </el-form-item>
              <el-form-item label="运费" :label-width="formLabelWidth" prop="Amount">
                <el-input v-model="editFrom.OrderShippingDto.Amount" :disabled="IsDisabled" placeholder="运费" autocomplete="off" clearable />
              </el-form-item>

              <el-container>
                <el-main>
                  <template v-if="editFrom.OrderShippingDto.ShppingInfo!=null">
                    <el-table
                      :data="editFrom.OrderShippingDto.ShppingInfo.data"
                      stripe="true"
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="time"
                        label="时间"
                        width="180"
                      />
                      <el-table-column
                        prop="context"
                        label="轨迹"
                      />
                    </el-table>
                  </template></el-main>
              </el-container>
            </template>
          </el-tab-pane>
          <el-tab-pane label="皮肤管理师" name="six">
            <template>
              <el-table
                :data="editFrom.OrderDoctorDtos"
                style="width: 100%"
              >
                <el-table-column
                  prop="Name"
                  label="姓名"
                  width="180"
                />
                <el-table-column
                  prop="JobTitle"
                  label="职称"
                  width="180"
                />
                <el-table-column
                  prop="Introduce"
                  label="简介"
                  width="380"
                />
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button type="primary" class="btnset" :disabled="IsDisabled" @click="saveEditForm()">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog ref="dialogRebateForm" :title="editFormTitle+''" :visible.sync="dialogRebateVisible" width="950px">
      <el-form ref="RebateFrom" :model="editFrom" :rules="rules" class="yuebon-setting-form">
        <template>
          <el-table
            :data="tableRebateData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="Nickname"
              label="返利人"
              width="250"
            />
            <el-table-column
              prop="ParentNickname"
              label="返利人上级"
              width="250"
            />
            <el-table-column
              prop="Amount"
              label="返利金额"
              width="200"
            />
            <el-table-column
              prop="SourceTypeDes"
              label="返利类型"
              width="200"
            />
          </el-table>
        </template>
      </el-form>
    </el-dialog>

    <el-dialog ref="dialogDeliveryForm" :title="editFormTitle" :visible.sync="dialogDeliveryVisible" width="660px">
      <el-form ref="editDeliverFrom" :inline="true" :model="editFrom.OrderShippingDto" :rules="rulesDeliver" class="demo-form-inline">
        <el-form-item label="快递公司" :label-width="formLabelWidth" prop="ShippingId">
          <el-select v-model="editFrom.OrderShippingDto.ShippingId" style="width:300px;" clearable placeholder="请选择快递公司" @change="selecetShippingChange">
            <el-option
              v-for="item in selecetShippingOptions"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" :label-width="formLabelWidth" prop="ShippingSn">
          <el-input v-model="editFrom.OrderShippingDto.ShippingSn" placeholder="请输入快递单号" style="width:300px;" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="运费" :label-width="formLabelWidth" prop="Amount">
          <el-input-number v-model="editFrom.OrderShippingDto.Amount" :min="0" style="width:300px;" placeholder="运费" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeliveryVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditFormTwo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { getPage, save, getById, del, SetOnState, delSoft, GetOrderShipping, GetOrderRebates } from '@/api/shop/orderservice'
import { GetAllEnable } from '@/api/shop/shippingservice'
import defaultSettings from '@/settings'
import * as fecha from 'element-ui/lib/utils/date'
export default {
  data() {
    return {
      IsDisabled: false,
      StatusOptions: [{
        value: '1',
        label: '待支付'
      }, {
        value: '2',
        label: '已支付'
      },
      {
        value: '3',
        label: '已发货'
      }, {
        value: '4',
        label: '已取消'
      }, {
        value: '5',
        label: '已完成'
      }],
      activeName: 'first',
      editorOption: {
        placeholder: '请输入...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块

            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向

            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题

            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式

            ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频

          ]
        },
        theme: 'snow' },
      content: '',
      searchform: {
        Keywords: '',
        Name: '',
        OrderNo: '',
        Status: null,
        Type: null,
        BuyName: '',
        ShippingName: '',
        ReferralPerson: ''
      },
      selectRole: [],
      selectedOrganizeOptions: '',
      selecetShippingOptions: [],
      selectOrganize: [],
      SysLogo: '',
      loadBtnFunc: [],
      tableData: [],
      tableRebateData: [],
      tableloading: true,
      pagination: {
        currentPage: 1,
        pagesize: 10,
        pageTotal: 0
      },
      sortableData: {
        // order: '',
        // sort: ''
      },
      dialogEditFormVisible: false,
      dialogDeliveryVisible: false,
      dialogRebateVisible: false,
      editFormTitle: '',
      editFrom: {
        Account: '',
        RealName: '',
        NickName: '',
        UserAddressDto: { ProvinceId: '' },
        OrderDetailDtos: [],
        OrderDoctorDtos: [],
        OrderShippingDto: { Amount: 0, ShippingId: '', ShippingSn: '' },
        OrderPayDto: []
      },
      RebateFrom:
      {
        Nickname: '',
        ParentNickname: '',
        Amount: '',
        SourceTypeDes: ''
      },
      rules: {
        Title: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        EnCode: [
          { required: true, message: '请输入识别码', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      },
      rulesDeliver: {
        ShippingId: [
          { required: true, message: '请选择快递公司', trigger: 'blur' }
        ],
        ShippingSn: [
          { required: true, message: '请输入快递单号', trigger: 'blur' }
        ]
      },
      httpFileUploadUrl: defaultSettings.fileUploadUrl,
      dialogVisible: false,
      dialogImageUrl: '',
      filelist: [],
      formLabelWidth: '150px',
      currentId: '',
      currentSelected: []
    }
  },
  created() {
    this.pagination.currentPage = 1
    this.InitDictItem()
    this.loadTableData()
    this.loadBtnFunc = JSON.parse(localStorage.getItem('yueboncurrentfuns'))
  },
  methods: {
    InitDictItem() {
      GetAllEnable().then(res => {
        this.selecetShippingOptions = res.ResData
      })
    },
    loadTableData: function() {
      this.tableloading = true
      var seachdata = {
        'CurrenetPageIndex': this.pagination.currentPage,
        'PageSize': this.pagination.pagesize,
        'Name': this.searchform.Name,
        'Status': this.searchform.Status,
        'OrderNo': this.searchform.OrderNo,
        'Type': this.searchform.Type,
        'BuyName': this.searchform.BuyName,
        'ShippingName': this.searchform.ShippingName,
        'ReferralPerson': this.searchform.ReferralPerson
      }
      getPage(seachdata).then(res => {
        this.tableData = res.ResData.Items
        this.pagination.pageTotal = res.ResData.TotalItems
        this.tableloading = false
      })
    },
    handleSearch: function() {
      this.pagination.currentPage = 1
      this.loadTableData()
    },
    handleRemove(file, fileList) {
      this.editFrom.SysLogo = file.url
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleClick(values) {
      alert(values)
    },
    ShowEditOrViewDialog: function(view, row) {
      if (row != null) {
        this.currentId = row.Id
      } else {
        if (this.currentSelected.length > 1 || this.currentSelected.length === 0) {
          this.$alert('请选择一条数据进行编辑/修改', '提示')
        }
        this.currentId = this.currentSelected[0].Id
      }
      if (view !== undefined) {
        if (view === 'select') {
          this.editFormTitle = '查看'
          this.editFrom.OrderShippingDto.Id = ''
          this.editFrom.OrderShippingDto.ShippingSn = ''
          this.editFrom.OrderShippingDto.ShippingId = ''
          this.editFrom.OrderShippingDto.ShippingName = ''
          this.editFrom.OrderShippingDto.ShippingTime = ''
          this.editFrom.OrderShippingDto.Amount = 0
          this.editFrom.OrderShippingDto.OrderId = ''
          this.IsDisabled = true
        } else {
          this.editFormTitle = '编辑'
        }
        this.dialogEditFormVisible = true
        this.bindEditInfo()
      } else {
        this.editFormTitle = '新增'
        this.currentId = ''
        this.selectedOrganizeOptions = ''
        this.dialogEditFormVisible = true
        this.filelist = []
        this.$refs['editFrom'].resetFields()
      }
    },
    ShowDeliveryOrViewDialog: function(view, row) {
      this.currentId = row.Id
      if (view !== undefined) {
        this.editFormTitle = '发货'
        this.dialogDeliveryVisible = true
        this.editFrom.OrderShippingDto.Id = ''
        this.editFrom.OrderShippingDto.ShippingSn = ''
        this.editFrom.OrderShippingDto.ShippingId = ''
        this.editFrom.OrderShippingDto.ShippingName = ''
        this.editFrom.OrderShippingDto.ShippingTime = ''
        this.editFrom.OrderShippingDto.Amount = 0
        this.editFrom.OrderShippingDto.OrderId = ''
        this.bindShippingInfo(row.Id)
      }
    },
    ShowRebateOrViewDialog: function(view, row) {
      this.currentId = row.Id
      if (view !== undefined) {
        this.editFormTitle = '返利列表'
        this.dialogRebateVisible = true
        this.bindRebateInfo(row.Id)
      }
    },
    cancelOrder: function(row) {
      this.$confirm('取消订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        save(null, 'order/canceOrder/' + row.Id).then(res => {
          if (res.Success) {
            this.$message({
              type: 'success',
              message: '取消成功!'
            })
            this.loadTableData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    bindEditInfo: function() {
      getById(this.currentId).then(res => {
        this.editFrom.NickName = res.ResData.NickName
        this.editFrom.Amount = res.ResData.Amount
        this.editFrom.ShippingAmount = res.ResData.ShippingAmount
        this.editFrom.DistrictAmount = res.ResData.DistrictAmount
        this.editFrom.PayAmount = res.ResData.PayAmount
        this.editFrom.PayTime = res.ResData.PayTime
        this.editFrom.StatusDes = res.ResData.StatusDes
        this.editFrom.CreateTime = res.ResData.CreateTime
        this.editFrom.OrderNo = res.ResData.OrderNo
        this.editFrom.Name = res.ResData.Name
        if (res.ResData.OrderDetailDtos != null) {
          this.editFrom.OrderDetailDtos = res.ResData.OrderDetailDtos
        }
        if (res.ResData.OrderPayDto != null) {
          this.editFrom.OrderPayDto = res.ResData.OrderPayDto
        }
        if (res.ResData.OrderDoctorDtos != null) {
          this.editFrom.OrderDoctorDtos = res.ResData.OrderDoctorDtos
        }
        if (res.ResData.OrderShippingDto != null) {
          this.editFrom.OrderShippingDto = res.ResData.OrderShippingDto
        }
        if (res.ResData.UserAddressDto != null) {
          this.editFrom.UserAddressDto = res.ResData.UserAddressDto
        }
      })
    },
    bindShippingInfo: function(orderId) {
      GetOrderShipping(orderId).then(res => {
        this.editFrom.OrderShippingDto.Id = res.ResData.Id
        this.editFrom.OrderShippingDto.ShippingSn = res.ResData.ShippingSn
        this.editFrom.OrderShippingDto.ShippingId = res.ResData.ShippingId
        this.editFrom.OrderShippingDto.ShippingName = res.ResData.ShippingName
        this.editFrom.OrderShippingDto.ShippingTime = res.ResData.ShippingTime
        this.editFrom.OrderShippingDto.Amount = res.ResData.Amount
        this.editFrom.OrderShippingDto.OrderId = res.ResData.OrderId
      })
    },
    bindRebateInfo: function(orderId) {
      GetOrderRebates(orderId).then(res => {
        this.tableRebateData = res.ResData
      })
    },
    /**
     * 新增/修改保存
     */
    saveEditForm() {
      console.log(this.editFrom.RoleId)
      this.$refs['editFrom'].validate((valid) => {
        if (valid) {
          const data = {
            Title: this.editFrom.Title,
            EnCode: this.editFrom.EnCode,
            'Id': this.currentId
          }

          var url = 'ad/Insert'
          if (this.currentId !== '') {
            url = 'ad/Update?id=' + this.currentId
          }
          save(data, url).then(res => {
            if (res.Success) {
              this.$message({
                message: '恭喜你，操作成功',
                type: 'success'
              })
              this.dialogEditFormVisible = false
              this.currentSelected = ''
              this.selectedOrganizeOptions = ''
              this.$refs['editFrom'].resetFields()
              this.loadTableData()
              this.InitDictItem()
            } else {
              this.$message({
                message: res.ErrMsg,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    saveEditFormTwo() {
      this.$refs['editDeliverFrom'].validate((valid) => {
        if (valid) {
          const data = {
            ShippingSn: this.editFrom.OrderShippingDto.ShippingSn,
            ShippingName: this.editFrom.OrderShippingDto.ShippingName,
            ShippingId: this.editFrom.OrderShippingDto.ShippingId,
            Amount: this.editFrom.OrderShippingDto.Amount,
            'Id': this.editFrom.OrderShippingDto.Id,
            OrderId: this.currentId
          }

          var url = 'order/CreateOrderShipping'
          console.log(this.editFrom.OrderShippingDto.Id)
          if (this.editFrom.OrderShippingDto != null && this.editFrom.OrderShippingDto.Id !== undefined && this.editFrom.OrderShippingDto.Id !== '') {
            url = 'order/UpdateOrderShipping?id=' + this.editFrom.OrderShippingDto.Id
          }
          save(data, url).then(res => {
            if (res.Success) {
              this.$message({
                message: '恭喜你，操作成功',
                type: 'success'
              })
              this.dialogDeliveryVisible = false
              this.currentSelected = ''
              this.selectedOrganizeOptions = ''
              this.$refs['editDeliverFrom'].resetFields()
              this.loadTableData()
              this.InitDictItem()
            } else {
              this.$message({
                message: res.ErrMsg,
                type: 'error'
              })
            }
          })
        } else {
          return false
        }
      })
    },
    SetOnState: function(val) {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        var currentIds = ''
        this.currentSelected.forEach(element => {
          currentIds += element.Id + ','
        })
        const data = {
          ids: currentIds,
          bltag: val
        }
        SetOnState(data).then(res => {
          if (res.Success) {
            this.$message({
              message: '恭喜你，操作成功',
              type: 'success'
            })
            this.currentSelected = ''
            this.loadTableData()
          } else {
            this.$message({
              message: res.ErrMsg,
              type: 'error'
            })
          }
        })
      }
    },
    deleteSoft: function(val) {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        var currentIds = ''
        this.currentSelected.forEach(element => {
          currentIds += element.Id + ','
        })
        const data = {
          ids: currentIds,
          bltag: val
        }
        delSoft(data).then(res => {
          if (res.Success) {
            this.$message({
              message: '恭喜你，操作成功',
              type: 'success'
            })
            this.currentSelected = ''
            this.loadTableData()
          } else {
            this.$message({
              message: res.ErrMsg,
              type: 'error'
            })
          }
        })
      }
    },
    deletePhysics: function() {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        var currentIds = ''
        this.currentSelected.forEach(element => {
          currentIds += element.Id + ','
        })
        const data = {
          ids: currentIds
        }
        del(data).then(res => {
          if (res.Success) {
            this.$message({
              message: '恭喜你，操作成功',
              type: 'success'
            })
            this.currentSelected = ''
            this.loadTableData()
          } else {
            this.$message({
              message: res.ErrMsg,
              type: 'error'
            })
          }
        })
      }
    },
    /**
     * 当表格的排序条件发生变化的时候会触发该事件
     */
    handleSortChange: function(column) {
      this.sortableData.sort = column.prop
      if (column.order === 'ascending') {
        this.sortableData.order = 'asc'
      } else {
        this.sortableData.order = 'desc'
      }
      this.loadTableData()
    },
    /**
     * 当用户手动勾选checkbox数据行事件
     */
    handleSelectChange: function(selection, row) {
      this.currentSelected = selection
    },
    /**
     * 当用户手动勾选全选checkbox事件
     */
    handleSelectAllChange: function(selection) {
      this.currentSelected = selection
    },
    /**
     * 选择每页显示数量
     */
    handleSizeChange(val) {
      this.pagination.pagesize = val
      this.pagination.currentPage = 1
      this.loadTableData()
    },
    /**
     * 选择当页面
     */
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadTableData()
    },
    dateformatter(row, column, cellValue, index) {
      var date = row[column.property]
      return cellValue ? fecha.format(new Date(date), 'yyyy-MM-dd') : ''
    },
    uploadFileSuccess: function(response, file, fileList) {
      this.editFrom.FilePath = defaultSettings.fileUrl + response.ResData.FilePath
    },
    selecetShippingChange: function(value) {
      var shipping = this.selecetShippingOptions.find(s => s.Id === value)
      this.editFrom.OrderShippingDto.Amount = shipping != null ? shipping.Price : 0
      this.editFrom.OrderShippingDto.ShippingName = shipping != null ? shipping.ShippingName : 0
      this.editFrom.OrderShippingDto.ShippingId = value
    }
  }
}
</script>
<style>
p {
  margin: 10px;
}

.edit_container,
.quill-editor {
  height: 300px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
